<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TODOLIST</title>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    .top{
      height: 80px;
      border-bottom: 1px solid #e5e5e5;
    }
    .center{
      width: 1200px;
      height: 80px;
      margin-left: auto;
      margin-right: auto;
      line-height: 80px;
    }
    h1{
      color: #27ae60;
    }
    .flex{
      display: flex;
    }
    input{
      width: 500px;
      height: 40px;
      border-radius: 20px;
      border: 1px solid #333;
      margin-left: 100px;
      padding-left: 20px;
    }
    input:focus{
      /* box-shadow: 0px 0px 10px #27ae60; */
      /* border: 1px solid transparent; */
      outline-color: #27ae60;
    }
    .top button{
      border: none;
      background: #27ae60;
      color: #fff;
      width: 100px;
      height: 40px;
      border-radius: 80px;
      margin-left: 20px;
      cursor: pointer;
    }
    .bottom{
      margin-top: 30px;
    }
    .bottom-center{
      width: 1200px;
      margin-left: auto;
      margin-right: auto;
    }
    .just-between{
      justify-content: space-between;
    }
    .bottom-center>div{
      width: 350px;
      border: 1px solid #27ae60;
      padding: 15px;
      border-radius: 5px;
    }
    ul{
      margin-left: 20px;
      margin-top: 20px;
    }
    li{
      height: 42px;
      line-height: 42px;
    }

    .bottom button{
      border: none;
      background: #27ae60;
      color: #fff;
      height: 20px;
      border-radius: 2px;
      margin-left: 10px;
      text-align: center;
      line-height: 20px;
      cursor: pointer;
      padding-left: 10px;
      padding-right: 10px;
    }
  </style>
</head>
<body>
  <div class="top">
    <div class="center flex">
      <h1>TODOLIST</h1>
      <div>
        <input class="ipt" placeholder="请输入待办项">
        <button class="addItem">Add</button>
      </div>
    </div>
  </div>
  <div class="bottom">
    <div class="bottom-center flex just-between">
      <div>
        <h3>未完成</h3>
        <ul class="unfinished">
        
        </ul>
      </div>
      <div>
        <h3>已完成</h3>
        <ul class="finished">
          
        </ul>
      </div>
      <div>
        <h3>全部</h3>
        <ul class="all">
          
        </ul>
      </div>
    </div>
  </div>
  <script>
    // 数据集合  包含了 全部的代办项，区分未完成，已完成

    // 在输入框中输入内容，点击添加，其实就是往 数据集合 中添加一条未完成数据

    // 点击完成时，其实就是将数据集合中的该项从未完成变更成已完成

    // 点击删除时，其实是从数据集合中删除该项数据

    // var data = []  // 数组，可以放多条数据

    // 每一项数据，其实包含了是否完成，列表项目内容

    // var item = {
    //   content: '具体内容',
    //   isFinished: true 
    // }




    // 定义数据集合
    var data = [
      {
        id: 1,
        content: '读书',
        isFinished: false
      }, 
      {
        id: 2,
        content: '笔记',
        isFinished: true
      }
    ]

    // 将数据集合中的数据，渲染到界面中

    // 渲染到未完成
    function renderUnfinished () {

      var unfinishedList = document.querySelector('.unfinished') // 获取未完成列表
      unfinishedList.innerHTML = ''


      // 数据集合中由多少条未完成数据，列表就有多少数据

      // 循环拿到数据集合的每一条数据
      data.forEach(function(item){
        if (item.isFinished == false) {
          var li = document.createElement('li')  // 每有一条数据，创建一个li标签
          li.innerHTML = item.content + `<button onclick="toFinished(${item.id})">点击完成</button>`  // li标签的内容其实就是 数据项的content
          unfinishedList.appendChild(li) // 将创建好的li标签，追加到 未完成列表中
        }
        
      })
    }

    renderUnfinished()

    function toFinished (id) {
      // 找到序号
      let index = data.findIndex(function(item){
        return item.id == id
      })
      data[index].isFinished = true
      renderAll()  // 渲染数据
      renderUnfinished()  // 渲染未完成数据
      renderFinished()  // 渲染已完成数据
    }

    // 渲染到已完成

    function renderFinished () {

      var finishedList = document.querySelector('.finished') // 获取已完成列表
      finishedList.innerHTML = ''


      // 数据集合中由多少条完成数据，列表就有多少数据

      // 循环拿到数据集合的每一条数据
      data.forEach(function(item){
        if (item.isFinished == true) {
          var li = document.createElement('li')  // 每有一条数据，创建一个li标签
          li.innerHTML = item.content  // li标签的内容其实就是 数据项的content
          finishedList.appendChild(li) // 将创建好的li标签，追加到 已完成列表中
        }
        
      })
    }
    renderFinished()

    // 渲染到全部中

    function renderAll () {

      var allList = document.querySelector('.all') // 获取全部列表
      allList.innerHTML = ''  // 清空之前的数据

      // 数据集合中由多少条数据，全部列表就有多少数据

      // 循环拿到数据集合的每一条数据
      data.forEach(function(item){
        var li = document.createElement('li')  // 每有一条数据，创建一个li标签
        li.innerHTML = item.content  // li标签的内容其实就是 数据项的content
        allList.appendChild(li) // 将创建好的li标签，追加到 全部列表中
      })
    }

    renderAll()
    
    
    
    // 2 监听点击事件
    var addBtn = document.querySelector('.addItem')  // 1 获取添加按钮
    addBtn.onclick = function(){  // 监听添加按钮的点击事件   // 当监听到点击事件后，执行这个funtion里面的内容
      var item = {
        isFinished: false,
        content: document.querySelector('.ipt').value,
        id: new Date().getTime() // 时间戳  1970年1月1号到现在的毫秒数
      }
      data.push(item)  // 往数据集合 中添加一条未完成数据

      renderAll()  // 渲染数据
      renderUnfinished()  // 渲染未完成数据
      renderFinished()  // 渲染已完成数据
    }

  
  </script>
</body>
</html>